<template>
  <div>
      <div ref="map" class="map">

      </div>
  </div>
</template>

<script>

import { Scene, HeatmapLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { getWorldGeoJson } from '@/api/geoJson.js'

export default {
    data(){
        return{
            el: null,
            scene: null,
            layer: null,
            geoJson:[]
        }
    },
    created(){
        this.onLoadData()
    },
    methods:{
        //加载主数据
        onLoadData(){
                let mainData = {}
                getWorldGeoJson(mainData).then(response => {
                this.geoJson = response.data.data
                console.log(this.geoJson)
                this.initMap()
            })
        },

        initMap(){
        this.$nextTick(() => {
            this.el = this.$refs.map
            this.scene = new Scene({
            id: this.el,
            logoVisible: false,
            map: new Mapbox({
                style: 'dark',
                pitch: 0,
                center: [ 127.5671666579043, 7.445038892195569 ],
                zoom: 2.632456779444394,
                minZoom:0
            })
            })
            this.scene.on('loaded', () => {
                    this.layer = new HeatmapLayer({})
                    .source(this.geoJson)
                    .shape('heatmap')
                    .size('confirm', [ 0, 100.0 ]) // weight映射通道
                    .style({
                    intensity: 2,
                    radius: 20,
                    opacity: 1.0,
                    rampColors: {
                        colors: [
                        '#FF4818',
                        '#F7B74A',
                        '#FFF598',
                        '#F27DEB',
                        '#8C1EB2',
                        '#421EB2'
                        ].reverse(),
                        positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ]
                    }
                    });
                this.scene.addLayer(this.layer);
                });
            });
        }
    }
}
</script>

<style scoped>
.map{
    margin-top: 10px;
    height: 80vh;
    width: 100%;
    position: relative;
    color: #f7ded7;
  }
</style>